<template>
  <div class="chart-container">
    <div
      ref="myRef"
      style="width:800px; height:600px"
    />
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, toRefs, watch, onMounted, nextTick, onUnmounted } from 'vue';
import * as echarts from 'echarts';
import { EChartsOption, EChartsType } from 'echarts'
import api from 'axios';
import { useMessageNotify } from 'src/hook/common/useMessageNotify';


export default defineComponent({
  name: 'MapItem',
  components: {
  },
  props: {

  },
  setup (props, context) {
    //错误通知
    const {
      showMessage
    } = useMessageNotify();

    //chart数据样式
    let myRef = ref<HTMLElement | null>(null); //dom


    //初始化数据
    let xyData = [
      {
        name: '山东',
        value: 180
      },
      {
        name: '广东',
        value: 100
      },
      {
        name: '江苏',
        value: 90
      },
      {
        name: '新疆',
        value: 20
      }
    ];

    //对象实例
    let myChartInstance = {} as EChartsType; // 不是响应对象，否则会出错

    //地图显示文字
    let mapName = {
      北京市: '北京',
      天津市: '天津',
      上海市: '上海',
      重庆市: '重庆',
      黑龙江省: '黑龙江',
      吉林省: '吉林',
      辽宁省: '辽宁',
      山东省: '山东',
      新疆维吾尔自治区: '新疆',
      西藏自治区: '西藏',
      宁夏回族自治区: '宁夏',
      甘肃省: '甘肃',
      青海省: '青海',
      青藏自治区: '青藏',
      内蒙古自治区: '内蒙',
      陕西省: '陕西',
      山西省: '山西',
      河北省: '河北',
      河南省: '河南',
      四川省: '四川',
      云南省: '云南',
      江苏省: '江苏',
      安徽省: '安徽',
      浙江省: '浙江',
      江西省: '江西',
      福建省: '福建',
      广东省: '广东',
      湖北省: '湖北',
      湖南省: '湖南',
      贵州省: '贵州',
      广西壮族自治区: '广西',
      海南省: '海南',
      香港特别行政区: '香港',
      澳门特别行政区: '澳门',
      台湾省: '台湾'
    };

    //初始化地图
    const initMap = (): void => {
      // 获取地图数据,将下载后的json文件放置/public目录下
      api.get('./tuple/chinaMap.json').then((res) => {
        // 使用数据注册地图
        echarts.registerMap('china', res.data);

        //延时初始化地图
        nextTick(() => {
          myChartInstance = echarts.init(myRef.value as HTMLElement);
          setOption();
        });
      });
    };

    //chart数据样式
    let myOption: EChartsOption = {
      title: {
        show: true,
        text: '中国地图',
        textStyle: {
          fontWeight: 'bolder',
          fontSize: 18
        }
      },
      tooltip: {
        show: true,
        trigger: 'item'
      },
      grid: {     //地图位置
        show: false,
        backgroundColor: 'transparent' //背景色
      },
      visualMap: {},   // 图例
      geo: [],
      series: []
    };

    //修改参数
    const addToChart = (): void => {
      if (myOption.series) {
        (myOption.series as any).length = 0;
        (myOption.geo as any).length = 0;
        (myOption.title as any).text = '中国地图';

        //visualMap
        let map_item = {
          min: 5,
          max: 200,
          text: ['High', 'Low'],
          realtime: false,
          calculable: true,
          splitNumber: 3,
          inRange: {    //颜色数组
            color: [
              '#eec70a',
              '#b0d174',
              '#e0f8f0',
              '#fee090',
              '#f46d43',
              '#a50026'
            ]
          }
        };
        myOption.visualMap = map_item;

        //Geo
        let geo_item = {
          // 地理坐标系组件
          map: 'china',  // echarts.registerMap名称
          roam: false, // 可以缩放和平移
          zoom: 1.3,
          aspectScale: 0.8, // 比例
          layoutCenter: ['50%', '60%'], // position位置
          layoutSize: 500, // 地图大小，保证了不超过 370x370 的区域

          //自定义命名映射，不设置的话，label默认是使用 geoJson中的name名
          nameMap: mapName,
          label: {  // 图形上的文本标签
            show: true,
            position: 'inside',
            color: '#ffffff',
            fontSize: '8',
            formatter: '{b}: {c}'
          },

          itemStyle: { // 所有地图的区域颜色
            // areaColor: detail.value.chart.itemStyle.areaColor,
            areaColor: '#443344',
            color: '#fff',
            borderColor: '#f3d741'
          },
          emphasis: {  // 选中高亮区域颜色
            itemStyle: {
              areaColor: '#83d56c'
            }
          },
          regions: [  // 隐藏不显示区域
            {
              name: '',
              itemStyle: {  // 隐藏地图
                opacity: 1  // 为 0 时不绘制该图形
              },
              label: {
                show: false // 隐藏文字
              }
            }
          ]
        };
        (myOption.geo as any).push(geo_item);

        //series
        let series_item = {
          name: '设备数量',
          type: 'map',
          map: 'china',
          geoIndex: 0,

          //这是要显示的数据
          data: xyData
        };

        (myOption.series as any).push(series_item);
      }
    }

    // 加载数据
    const setOption = () => {
      if (myChartInstance) {
        addToChart();
        myChartInstance.setOption(myOption);
      }
    }

    // 尺寸变化
    const onResize = () => {
      if (myChartInstance) {
        myChartInstance.resize();
      }
    };


    //初始化
    const init = () => {
      //动态添加图表
      addToChart();
    }

    // 挂载组件
    onMounted(() => {
      //初始化数据
      init();

      //读取地图数据
      initMap();

      //跟随窗口变化
      window.addEventListener('resize', onResize);
    });

    // 卸载组件
    onUnmounted(() => {
      window.removeEventListener('resize', onResize);
    });
    return {
      myRef
    };
  }
});
</script>

<style lang="scss" scoped>
.chart-container {
  position: relative;
  left: 20px;
  top: 20px;
  alignment: center;
  width: 100%;
  height: 100%;
  text-align: center;
}
.topo-map {
  //background-color: #7de395;
}
</style>
